.modal-container {
  background-color: rgba(33, 33, 33, .4);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  display: none;
  .modal-body {
    background-color: #fff;
    border-radius: 8px;
    padding: 30px;
    width: 400px;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    .modal-title {
      text-align: center;
      font-size: 18px;
      font-weight: bold;
      &.alert:before {
        content: "❗";
        display: inline-block;
      }
      &.confirm:before {
        content: "❓";
        display: inline-block;
      }
      &.error:before {
        content: "👿";
        display: inline-block;
      }
      &.success:before {
        content: "✔";
        display: inline-block;
      }
    }
    .modal-content {
      min-height: 100px;
    }
    .modal-footer {
      text-align: center;
      button {
        margin: 0 20px;
        padding: 8px 28px;
        font-size: 16px;
        border-radius: 2px;
        background-color: #409EFF;
        border: 0;
        outline: none;
        color: white;
        border-radius: 8px;
        &:hover {
          cursor: pointer;
          background-color: rgba(#409EFF, .8);
        }
      }
    }
  }
}
